<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {background-color: #45cbff;}
	#c1,span {background-color: #fff;}
	</style>
	<script>
	window.onload = function () {
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');			//绘制环境
	 	/*
			drawImage:插入图片。等待图片加载完，在执行canvas操作
				-图片预加载：在onload中调用方法

			drawImage(yImg, x, y, w, h) 	当前图片，xy坐标，宽高（可选）
				-如果宽高不写，则以图片的原始宽高打开图片

	 	*/
	 	var yImg = new Image();				//图片预加载

	 	yImg.onload = function (){
	 		oGC.drawImage(this, 0, 0);
	 	};

	 	yImg.src = '66.jpg';

	}
	</script>
</head>
<body>
	<canvas id="c1" width="500" height="500">
		<span>不支持canvas的浏览器</span>
	</canvas>	<!-- 默认宽300 高150 -->
</body>
</html>